<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="css/css.css" rel="stylesheet" />

	<!--导入vue这个包-->
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

</head>
<body>

<!-- 修改页面

37	20210830后端班	李伟伟	2021-11-06	迟到	17634394003 -->

<table id="abc">
	<tr>
		<td>ID</td>
		<td v-if="kaoqin.id">{{kaoqin.id}}</td>
	</tr>
	<tr>
		<td>班级名称</td>
		<td v-if="kaoqin.className">{{kaoqin.className}}</td>
	</tr>
	<tr>
		<td>学生姓名</td>
		<td v-if="kaoqin.studentName">{{kaoqin.studentName}}</td>
	</tr>

	<tr>
		<td>迟到日期</td>
		<td v-if="kaoqin.delayDate">
			<input type="date" v-bind:value="kaoqin.delayDate" />
		</td>
	</tr>

	<tr>
		<td colspan="2">
			<input type="button" value="提交" />
		</td>
	</tr>

</table>
</body>

<script>
	window.onload=function(){
		var kaoqin={
			id:0,
			className:'',
			studentName:'',
			delayDate:'',
			typeName:'',
			phone:''
		};
		var xx=new Vue({
			el:'#abc',
			data:{
				kaoqin:kaoqin,
		
			},
			methods:{
				//发ajax请求都方法 ....
				get:function(){
		
					var url='http://localhost:8080/attendance-service/class/find.do?method=findAttendanceById&id=40';
					this.$http.get(url).then(function(backdatas){
						//1 给vue对象的data属性赋值
						console.log(backdatas);
		
						var code =backdatas.body.code;
						console.log(code);
		
						// 拿到后台返回的数据
						var kaoqin=backdatas.body.data;
		
						// 把 dataR 给 data的studentList属性
						xx.kaoqin=kaoqin;
						console.log("success...")
		
					});
				},
			}
			
		});
		xx.get();
		
	}


	</script>
</html>
